<template>
  <div>
    <Nav></Nav>
    <div class="one">
      <div class="two">
        <div>
          <el-form ref="form" :model="search">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名" label-width="80px" prop="name">
                  <el-input v-model="search.name" style="width: 200px" placeholder="请输入姓名" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话号码" label-width="80px" prop="phone">
                  <el-input v-model="search.phone" style="width: 200px" placeholder="请输入电话号码" type="tel" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div>
          <!-- <el-button type="primary" @click="cmdSearch">搜索</el-button> -->
          <el-button type="info" @click="cmdReset">重置</el-button>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px">
      <el-radio-group v-model="progress" size="medium" @change="choose">
        <el-radio-button label="1">已通过</el-radio-button>
        <el-radio-button label="0">待审核</el-radio-button>
        <el-radio-button label="-1">已禁用</el-radio-button>
      </el-radio-group>
    </div>
    <div>
      <el-table :data="tableData" stripe style="width: 100%" border>
        <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
        <el-table-column prop="position" label="职位" width="120" align="center"></el-table-column>
        <el-table-column prop="jobAccount" label="域账号" width="120" align="center"></el-table-column>
        <el-table-column prop="phone" label="电话" align="center"></el-table-column>
        <!-- <el-table-column prop="role" label="角色" align="center" width="80"></el-table-column> -->
        <!-- <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column> -->
        <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" @click="edit(scope.row.id)" v-if="progress == '1'">修改</el-button> -->
            <el-button type="primary" @click="agree(scope.row.id)" v-if="progress == '0' || progress == '-1'">通过</el-button>
            <el-button type="danger" @click="enable(scope.row.id)" v-if="progress == '1' || progress == '0'">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationStyle">
      <el-pagination v-if="total>0" background layout="total, prev, pager, next, jumper" :page-size="pageSize" @current-change="handleCurrentChange" :total="total"></el-pagination>
    </div>
    <edit-dlg :show="showEditDlg" :id="id" @closeDlg="closeEditDialog"></edit-dlg>
  </div>
</template>
<script>
import swal from 'sweetalert'
import { getMembers, checkUser } from '@/api/api'
import nav from '../../components/navigation'
import paging from '../../components/paging'
import EditDlg from './people-edit'
export default {
  components: {
    Nav: nav,
    Paging: paging,
    'edit-dlg': EditDlg,
  },

  data () {
    return {
      search: {
        name: '',
        phone: ''
      },
      progress: '1',
      tableData: [],
      showEditDlg: false,
      id: '',
      pageSize: 10,
      pageNum: 0,
      total: 0
    }
  },
  mounted () {
    this.choose()
  },
  methods: {
    getAllPeople () {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.progress,
      }
      getMembers(params)
        .then((res) => {
          // console.log(res)
          if (res.code == 200) {
            this.tableData = res.data.content
            this.total = res.data.totalElements
          } else {
            swal('错误', res.message || '网络连接错误', 'error')
          }
        })
        .catch((err) => {
          swal('错误', '网络连接错误', 'error')
        })
    },
    handleCurrentChange (val) {
      this.pageNum = val - 1
      this.getAllPeople()
    },
    cmdSearch() {

    },
    cmdReset() {
      this.$refs.form.resetFields()
    },
    choose () {
      this.pageNum = 0
      this.getAllPeople()
    },
    edit (id) {
      this.id = id
      this.showEditDlg = true
    },
    closeEditDialog () {
      this.showEditDlg = false
      this.getAllPeople()
    },
    agree (id) {
      let msg = '是否确认通过此次账号'
      this.confirm(msg, () => {
        let params = {
          id: id,
          status: '1',
        }
        checkUser(params).then((res) => {
          swal('提示', '通过成功', 'success')
          this.choose()
        })
      })
    },
    enable (id) {
      let msg = '是否确认禁用该账号'
      this.confirm(msg, () => {
        let params = {
          id: id,
          status: '-1',
        }
        checkUser(params).then((res) => {
          swal('提示', '禁用成功', 'success')
          this.choose()
        })
      })
    },
  },
}
</script>
<style lang="less" scoped>
.one {
  line-height: 60px;
  .el-form {
    position: relative;
    top: 12px;
    margin-right: 10px;
  }
  .two {
    width: 80%;
    display: flex;
  }

  height: 60px;
  background-color: rgb(255, 255, 255);
  margin-bottom: 10px;
}
</style>